<template>
    <div class="wrapper">
        <a-card style="width: 100%;">
            <div class="cont">
                <div class="steps">
                    <div class="step">
                        <div class="head"></div>
                        <a-card style="width: 100%; height: 100%; background-color: #F2F2F2;"></a-card>
                    </div>
                    <div class="step">
                        <div class="head"></div>
                        <a-card style="width: 100%; height: 100%; background-color: #F2F2F2;"></a-card>
                    </div>                    <div class="step">
                        <div class="head"></div>
                        <a-card style="width: 100%; height: 100%; background-color: #F2F2F2;"></a-card>
                    </div>                    <div class="step">
                        <div class="head"></div>
                        <a-card style="width: 100%; height: 100%; background-color: #F2F2F2;"></a-card>
                    </div>                    <div class="step">
                        <div class="head"></div>
                        <a-card style="width: 100%; height: 100%; background-color: #F2F2F2;"></a-card>
                    </div>
                </div>
                <div class="func">
                    <div class="butts">
                        <a-button size="large">一键发布+</a-button>
                        <a-button size="large">历史询价查询</a-button>
                    </div>
                    <h3>材料、设备、机械租赁、劳务分包、专业分包，交给我，专业为您询价</h3>
                    <h3>·省时、省心    ·高效、专业</h3>
                </div>
                <div class="bar">
                    <div class="barText">已完成{{ num }}条询价服务</div>
                </div>
                <div class="results">
                    <a-card style="width: 15%; height: 200px; background-color: #F2F2F2;"></a-card>
                    <a-card style="width: 15%; height: 200px; background-color: #F2F2F2;"></a-card>
                    <a-card style="width: 15%; height: 200px; background-color: #F2F2F2;"></a-card>
                    <a-card style="width: 15%; height: 200px; background-color: #F2F2F2;"></a-card>
                    <a-card style="width: 15%; height: 200px; background-color: #F2F2F2;"></a-card>
                </div>
            </div>
        </a-card>
    </div>
</template>

<script setup>

</script>

<style scoped>
.wrapper{
    width: 80%;
}
.steps{
    width: 95%;
    height: 100%;
    margin: auto auto auto auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}
.step{
    position: relative;
    width: 17%; 
    height: 170px;
}
.head{
    position: absolute;
    top: 0;
    border-radius: 8px;
    z-index: 100;
    width: 100%;
    height: 55px;
    background-color: orange;
    opacity: 0.5;
}
.func{
    width: 100%;
    height: 100%;
    margin: auto auto auto auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}
.butts{
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.bar{
    width: 95%;
    height: 60px;
    background-color: cadetblue;
    opacity: 0.5;
    margin: 0 auto;
    border-radius: 5px;
    margin-bottom: 20px;
}
h3{
    font-size: 20px;
}
.barText{
    font-size: 30px;
    text-align: center;
    margin: auto 0;
}
.results{
    width: 95%;
    height: 100%;
    margin: auto auto auto auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
</style>